<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="green_circle"></view>
		<view class="green_content">
			<view class="supplierone" v-for="(item,index) in list" :key="index">
				<view class="infos">
					<view class="headsbox">
						<image :src="item.image" mode="aspectFill" class="headimg"></image>
						<image src="../../static/img/miaobk.png" mode="widthFix" class="miaobk"></image>
						<text>{{item.city}}</text>
					</view>
					<view class="justinfo">
						<view class="namedes">
							<view class="" style="margin-top: 10rpx;">
								<text class="clamp1">{{item.shop_name}}</text>
								<view class="">
									<view class="xinyong_box">
										<image :src="item.mimage" v-if="item.mimage" mode="heightFix"></image>
										<view class="xin">信</view>
										<view class="xin_number">{{item.credit_value}}</view>
										<view class="shiming" v-if="item.realname">实</view>
										<view class="qiye" v-if="item.enterprise">企</view>
									</view>
								</view>
							</view>
							<view @click="attention(item,index)" :class="item.is_follow==1?'attention opt':'attention'">
								{{item.is_follow==1?'已关注':'+ 关注'}}
							</view>
						</view>
						<view class="one_city">{{item.citys}}</view>
						<!-- <view class="clamp1 onedes">{{item.business}}</view> -->
					</view>
				</view>
				<view class="doits">
					<view class="contact" @click="dialing(2,item.id,item.mobile)">联系卖家</view>
					<view class="chatachat" @click="chat(index)">聊一聊</view>
					<!-- <navigator url="/chat/chatingroom" hover-class="none" class="chatachat">聊一聊</navigator> -->
					<navigator :url="'/home/station/stationpage?id='+item.client_uid" hover-class="none"
						class="instore">进店</navigator>
				</view>
			</view>
		</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../../static/img/wsousuo.png" mode="widthFix"></image>
			<view class="text">暂无苗店</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				settingdata: {
					name: '服务苗站',
					bgColor: '#38bf8d',
					titleColor: '#fff',
					showNav: true,
					showTypes: 0,
					position: "miaostation"
				},
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
			}
		},
		onLoad() {
			_this = this
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('servicestore', {
					city: uni.getStorageSync("address").city,
					client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : ""
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},

			attention(e, index) {
				console.log(e, index)
				_this.$api.islogin(() => {
					_this.$api.get("savefollow", {
						select_type: 1,
						types: 3,
						id: e.client_uid
					}).then(data => {
						console.log(this.detail)
						_this.list[index].is_follow = _this.list[index].is_follow == 0 ? 1 : 0
						//如果点击了关注,刷新上个页面的关注信息
						// wx.setStorageSync('index_onShow', true)
					});
				})
			},

			// 跳转到聊天
			chat(e) {
				console.log(e, this.list)
				let list = {}
				list = {
					to_id: this.list[e].client_uid,
					from_id: wx.getStorageSync('client_uid'),
					name: this.list[e].shop_name,
				}

				wx.setStorageSync('list', list)

				uni.navigateTo({
					url: '../../chat/chatingroom?type=2' + '&member_type=1'
				})
			},
			//拨号并记录
			dialing(call_type, client_uid, mobile) {
				_this.$api.post("calllog", {
					calllog_uid: client_uid,
					call_type: call_type
				}).then(data => {
					_this.$plug.dialing(mobile)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.green_circle {
		width: 950rpx;
		height: 420rpx;
		border-radius: 0 0 320rpx 320rpx;
		background-color: #38BE8C;
		position: absolute;
		top: -30px;
		left: -100rpx;
		z-index: -1;
	}

	.green_content {
		padding-bottom: 20rpx;

		.supplierone {
			margin: 51rpx 25rpx 0 25rpx;
			display: flex;
			flex-direction: column;
			box-shadow: -2rpx 4rpx 35rpx 0 rgba(224, 229, 226, 0.44);
			border-radius: 20rpx;
			background-color: #fff;

			.infos {
				display: flex;
				flex-direction: row;
				padding: 0 37rpx 45rpx 36rpx;
				height: 213rpx;
				align-items: center;

				.headsbox {
					margin-top: -31rpx;
					display: flex;
					flex-direction: column;

					.headimg {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
						border: 4rpx solid #fff;
						z-index: 2;
					}

					.miaobk {
						width: 130rpx;
						margin-top: -60rpx;
					}

					text {
						color: #38BF8D;
						font-size: 28rpx;
						margin-top: -70rpx;
						text-align: center;
					}
				}

				.justinfo {
					margin-left: 32rpx;
					width: 466rpx;
					display: flex;
					flex-direction: column;
					margin-top: 32rpx;

					.namedes {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.attention {
							width: 107rpx;
							height: 50rpx;
							background: #38be8c;
							border-radius: 25rpx;
							text-align: center;
							line-height: 48rpx;
							border: 1rpx solid #38be8c;
							font-size: 26rpx;
							color: #FFFFFF;
						}

						text {
							color: #333333;
							font-size: 32rpx;
							width: 300rpx;
							display: inline-block;
						}

						image {
							height: 36rpx;
							margin-right: 12rpx;
						}

						.xinyong_box {
							display: flex;
							flex-direction: row;
							align-items: center;

							.xin {
								width: 30rpx;
								height: 30rpx;
								background: #00C575;
								border-radius: 3px 0 0 3rpx;
								text-align: center;
								line-height: 30rpx;
								color: #fff;
								font-size: 20rpx;
							}

							.xin_number {
								background-color: #fff;
								border: 2rpx solid #00C575;
								border-radius: 0 3rpx 3rpx 0;
								color: #00C575;
								font-size: 20rpx;
								text-align: center;
								height: 30rpx;
								line-height: 30rpx;
								width: 70rpx;
							}
						}
					}

					.one_city {
						margin-top: 14rpx;
						color: #999999;
						font-size: 28rpx;
					}

					.onedes {
						margin-top: 22rpx;
						color: #999999;
						font-size: 28rpx;
					}
				}
			}

			.doits {
				height: 89rpx;
				display: flex;
				flex-direction: row;
				border-top: 2rpx solid #eeeeee;

				.contact {
					width: 33%;
					height: 100%;
					text-align: center;
					line-height: 89rpx;
					border-radius: 0 0 0 20rpx;
					color: #333333;
					font-size: 28rpx;
				}

				.chatachat {
					width: 33%;
					height: 100%;
					text-align: center;
					line-height: 89rpx;
					color: #333333;
					font-size: 28rpx;
					border-left: 2rpx solid #eeeeee;
					border-right: 2rpx solid #eeeeee;
				}

				.instore {
					width: 33%;
					height: 100%;
					text-align: center;
					line-height: 89rpx;
					color: #333333;
					font-size: 28rpx;
					border-radius: 0 0 20rpx 0;
				}
			}
		}
	}
</style>
